<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <div class="page-main-title">
      车场信息-编辑车场信息
      <i class="return-icon" @click="back"></i>
    </div>
    <div class="main-content">
      <div class="content" v-if="parkBaseInfo">
        <el-form
          :model="parkBaseInfo"
          :rules="rules"
          ref="parkBaseInfo"
          label-width="140px"
          size="small"
          class="zb-form"
          label-position="left"
        >
          <el-form-item label="停车场名称" prop="name" placeholder="请填写停车场名称">
            <el-input v-model.trim="parkBaseInfo.name"></el-input>
          </el-form-item>

          <el-form-item
            label="停车场图片"
            class="zb-upload-img"
            v-if="parkBaseInfo.picChangeFlag !== true"
          >
            <el-upload
              class="upload-demo"
              action
              :on-change="handleChange"
              :auto-upload="false"
              :file-list="parkBaseInfo.uiOpt.parkinglotImgfileList"
              list-type="picture"
            >
              <el-button size="small" type="primary">选取图片</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过900kb，最佳比例为16:9
                <a
                  href="javascript:;"
                  class="demo-icon"
                  @click="showParkinglotImg"
                >查看图例</a>
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item
            label="停车场图片"
            prop="picStr"
            class="zb-upload-img"
            v-if="parkBaseInfo.picChangeFlag === true"
          >
            <el-input v-model="parkBaseInfo.picStr" v-show="false"></el-input>
            <el-upload
              class="upload-demo"
              action
              :on-change="handleChange"
              :auto-upload="false"
              :file-list="parkBaseInfo.uiOpt.parkinglotImgfileList"
              list-type="picture"
            >
              <el-button size="small" type="primary">选取图片</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过900kb，最佳比例为16:9
                <a
                  href="javascript:;"
                  class="demo-icon"
                  @click="showParkinglotImg"
                >查看图例</a>
              </div>
            </el-upload>
          </el-form-item>

          <div class="el-form--inline zb-inline-form hide_label">
            <el-form-item label="停车场区域" prop="uiOpt.areaSelected[0]">
              <el-select
                placeholder="省"
                v-model="parkBaseInfo.uiOpt.areaSelected[0]"
                @change="getAreaLv2"
              >
                <el-option
                  v-for="(item, index) in parkBaseInfo.uiOpt.areaAreaData[0]"
                  :label="item.localName"
                  :value="item.pkAreaId"
                  :key="item.pkAreaId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="区域" prop="uiOpt.areaSelected[1]">
              <el-select
                placeholder="市"
                v-model="parkBaseInfo.uiOpt.areaSelected[1]"
                @change="getAreaLv3"
              >
                <el-option
                  v-for="(item, index) in parkBaseInfo.uiOpt.areaAreaData[1]"
                  :label="item.localName"
                  :value="item.pkAreaId"
                  :key="item.pkAreaId"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="区域" prop="uiOpt.areaSelected[2]">
              <el-select
                placeholder="区"
                v-model="parkBaseInfo.uiOpt.areaSelected[2]"
                @change="setParkBaseInfoAreaData"
              >
                <el-option
                  v-for="(item, index) in parkBaseInfo.uiOpt.areaAreaData[2]"
                  :label="item.localName"
                  :value="item.pkAreaId"
                  :key="item.pkAreaId"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <el-form-item label="停车场详细地址" prop="address">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请填写停车场详细地址"
              v-model="parkBaseInfo.address"
            ></el-input>
          </el-form-item>

          <el-form-item label="车场经纬度" class="map-form-item" prop="uiOpt.gpsXY">
            <el-input placeholder="请点击选择车场经纬度" v-model="parkBaseInfo.uiOpt.gpsXY"></el-input>
            <a href="javascript:;" class="map-btn" @click="initParkMap">点击选择</a>
          </el-form-item>

          <el-form-item label="总车位数" prop="slotsNumber">
            <el-input
              type="number"
              placeholder="请填写停车场总车位数"
              v-model.number="parkBaseInfo.slotsNumber"
              @blur="setFixNumber"
            ></el-input>
          </el-form-item>

          <el-form-item label="临停车位数" prop="tempCarports">
            <el-input
              type="number"
              placeholder="请填写停车场临停车位数"
              v-model.number="parkBaseInfo.tempCarports"
              @blur="setFixNumber"
            ></el-input>
          </el-form-item>

          <el-form-item label="固定车位数">
            <el-input type="number" :disabled="true" v-model.number="parkBaseInfo.fixNumber"></el-input>
          </el-form-item>

          <el-form-item label="车场负责人" prop="parkingSupervisor">
            <el-input placeholder="请填写负责人姓名" v-model="parkBaseInfo.parkingSupervisor"></el-input>
          </el-form-item>

          <el-form-item label="负责人手机号码" prop="parkingSupervisorPhone">
            <el-input
              type="number"
              placeholder="请填写负责人手机号码"
              v-model.number="parkBaseInfo.parkingSupervisorPhone"
            ></el-input>
          </el-form-item>

          <el-form-item label="停车场类型">
            <el-radio-group v-model="parkBaseInfo.parkType">
              <el-radio :label="0">商场</el-radio>
              <el-radio :label="1">住宅</el-radio>
              <el-radio :label="2">商住一体</el-radio>
              <el-radio :label="4">写字楼</el-radio>
              <el-radio :label="5">社会公共</el-radio>
              <el-radio :label="3">医院及枢纽</el-radio>
              <el-radio :label="7">住宅写字楼</el-radio>
              <el-radio :label="8">商场写字楼</el-radio>
              <el-radio :label="6">其他</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
            label="默认车牌简称"
            class="short-input"
            prop="defaultProvince"
            v-if="$route.query.parkType === '1'"
          >
            <el-input :maxlength="2" placeholder="简称" v-model="parkBaseInfo.defaultProvince"></el-input>
          </el-form-item>

          <!-- <el-form-item
            label="停车场协议"
            prop="uiOpt.protocolKey"
            v-if="$route.query.parkType === '1'"
          >-->
          <el-form-item label="停车场协议" prop="uiOpt.protocolKey" v-if="false">
            <el-input v-model="parkBaseInfo.uiOpt.protocolKey" v-show="false"></el-input>
            <el-upload
              class="upload-demo"
              ref="protocolUpload"
              action="mgr/operatorPark/uploadParkAgreement"
              :on-change="protocolHandleChange"
              :on-success="protocolUploadSuccess"
              :on-remove="protocolRemove"
              :auto-upload="false"
              :file-list="parkBaseInfo.uiOpt.protocolList"
            >
              <el-button size="small" type="primary">上传协议</el-button>
              <div slot="tip" class="el-upload__tip">
                下载协议模版并盖章上传
                <a
                  href="javascript:;"
                  class="demo-icon"
                  @click="downloadParkinglotProtocol"
                >下载协议模版</a>
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item size="medium" class="action-box" label-width="0px">
            <el-button type="primary" plain @click="back">取消</el-button>
            <el-button type="primary" @click="saveEdit('parkBaseInfo')">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog
      title="选取车场经纬度"
      :visible.sync="mapUI_data.dialogVisible"
      width="750px"
      class="zb-dialog dialog-container map-dailog"
      custom-class="zb-center-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <!-- 搜索输入框 -->
        <div class="search-box">
          <div class="input-item">
            <input id="tipinput" type="text" autocomplete="off" placeholder="请输入车场关键字搜索" />
          </div>
          <div class="rs-box">
            <img src="../../../../../assets/img/ic_coordinate.svg" alt />
            <span>坐标：</span>
            <span>{{mapUI_data.selectPos.x}},{{mapUI_data.selectPos.y}}</span>
          </div>
        </div>
        <!-- 地图 -->
        <div id="park-map"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="setMapPos">确 定</el-button>
        <el-button size="medium" plain @click="mapDailogHide">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>

<style>
.amap-sug-result {
  z-index: 3000;
}
</style>


<style lang="less" scoped>
@import "../../../../../assets/less/base/variables.less";
@import "../../../../../assets/less/base/newTabPageCommom.less";

.main-content {
  margin: 0 20px;
  margin-top: 20px;
}

.dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-content {
    margin: -30px -20px;
    position: relative;
    .search-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      height: 54px;
      z-index: 10;
      display: flex;
      align-items: center;
      .input-item {
        flex: 1;
        text-align: center;
        > input {
          width: 300px;
          height: 34px;
          background-image: url(../../../../../assets/img/ic_search.svg);
          background-repeat: no-repeat;
          background-position: 10px center;
          outline: none;
          border: 1px solid #d7dce2;
          border-radius: 4px;
          padding-left: 36px;
        }
      }
      .rs-box {
        flex: 1;
        line-height: 25px;
        img {
          position: relative;
          bottom: 2px;
        }
        span {
          &:first-child {
            color: #999999;
          }
          &:last-child {
            color: #474747;
            font-weight: 600;
          }
        }
      }
    }
  }
  .el-dialog {
    #park-map {
      height: 550px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../AddParkingLot/AddParkingLotComponents/FormContent.less";
.zb-form {
  width: 480px;
}

.el-upload__tip {
  position: relative;
  .demo-icon {
    position: absolute;
    right: 20px;
    transform: translateX(100%);
  }
}
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";
</style>

